
/** 客户端初始化webSocket **/
let websocket=new WebSocket("ws://"+location.host+"/wsmessage");
//连接成功建立的回调方法
websocket.onopen=function(event){
    console.log("连接成功！");
}
//连接关闭的回调方法
websocket.onclose=function(event){
    console.log("连接关闭！");
}
//连接发生错误的回调方法
websocket.onerror=function(event){
    console.log("连接发生错误！");
}
//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛出异常
websocket.onbeforeunload=function(event){
    console.log("监听窗口关闭！");
}

//客户端接收消息
websocket.onmessage=function(event){
    console.log("[onmessage]"+event.data);
    let resp=JSON.parse(event.data);
    if(resp.type=='message'){
        //处理消息响应
        handlerMessage(resp);
    }
}

function handlerMessage(resp){
    //1、根据resp中的sessionId，找到会话列表中对应的li元素，若不存在则创建新会话
    let sessionListLi=document.querySelector('#session-list');
    let curSessionLi=findSessionById(resp.sessionId);
    if(curSessionLi==null){
        curSessionLi=document.createElement('li');
        curSessionLi.setAttribute('message-session-id',resp.sessionId);
        curSessionLi.innerHTML='<h3>'+resp.fromName+'<h3>'+'<p></p>';
        curSessionLi.onclick=function(){
            clickSession(curSessionLi);
        }
    }
    //2、将新消息显示在会话预览框中
    let p=curSessionLi.querySelector('p');
    p.innerHTML=resp.content;
    if(p.innerHTML.length>10){
        p.innerHTML=p.innerHTML.substring(0,10)+'...';
    }
    //3、会话列表置顶
    sessionListLi.insertBefore(curSessionLi,sessionListLi.children[0]);
    //4、如果会话被选中，则在消息列表显示新的消息，调整滚动条位置至底部
    if(curSessionLi.className=='selected'){
        let messageShowDiv=document.querySelector('.message-show');
        addMessage(messageShowDiv,resp);
        scrollBottom(messageShowDiv);
    }
}

function findSessionById(targetSessionId){
    let sessionLis=document.querySelectorAll('#session-list>li');
    for(let sessionLi of sessionLis){
        let sessionId=sessionLi.getAttribute('message-session-id');
        if(sessionId==targetSessionId){
            return sessionLi;
        }
    }      
    return null;    
}

//实现标签页的切换
function initSwitchTab(){
    //1、获取标签页的相关元素
    let tabSession=document.querySelector('.tab-session');
    let tabFriend=document.querySelector('.tab-friend');
    let lists=document.querySelectorAll(".list");

    //2、注册点击事件
    tabSession.onclick=function(){
        //设置图标
        tabSession.style.backgroundImage='url(pic/session2.png)';
        tabFriend.style.backgroundImage='url(pic/friend1.png)';
        //显示会话标签页
        //将获取到的第1个list元素类名设置为list，将获取到的第2个list元素类名设置为list hide，
        lists[0].classList='list';
        lists[1].classList='list hide';
    }

    tabFriend.onclick=function(){
        //设置图标
        tabSession.style.backgroundImage='url(pic/session1.png)';
        tabFriend.style.backgroundImage='url(pic/friend2.png)';
        //显示联系人标签页
        lists[0].classList='list hide';
        lists[1].classList='list';
    }
}

initSwitchTab();

//获取登录用户信息
function getUser(){
    $.ajax({
        type:'get',
        url:'/user/getuser',
        success:function(result){
            let userDiv=document.querySelector('.user');
            if(result.code==200 && result.data!=null){
                userDiv.innerHTML=result.data.userName;
                userDiv.setAttribute('user-id',result.data.userId);
            }else{
                alert(result.errmsg);
                location.assign("login.html");
            }
        }
    });
}
getUser();

//获取好友列表
function getFriendList(){
    $.ajax({
        type:'get',
        url:'/user/getfriendlist',
        success:function(result){
            let friendlist=document.querySelector('#friend-list');
            friendlist.innerHTML='';
            if(result.code==200 && result.data!=null){
                var friendList=result.data;
                //用let来定义
                for(let friend of friendList){
                    let li=document.createElement('li');
                    li.innerHTML='<h4>'+friend.friendName+'<h4>';
                    li.setAttribute('friend-id',friend.friendId);
                    friendlist.append(li);
                    //给每个<li>增加点击事件
                    li.onclick=function(){
                        clickFriend(friend);
                    }
                }    
            }else{
                alert(result.errmsg);
                location.assign("login.html");
            }
        }
    });
}

getFriendList();

//获取会话列表
function getSessionList(){
    $.ajax({
        type:'get',
        url:'/user/getsessionlist',
        success:function(reslut){
            //1、清空会话列表
            let sessionList=document.querySelector('#session-list');
            sessionList.innerHTML='';
            //2、遍历messageSessions(sessionId,friendList(friendId,friendName),lastMessage)
            if(reslut.code==200 && reslut.data!=null){
                for(let session of reslut.data){
                    //3、将该会话sessionId保存到li标签的属性中
                    let li=document.createElement('li');
                    console.log(session.sessionId);
                    li.setAttribute('message-session-id',session.sessionId);
                    //4、预览消息截断处理
                    if(session.lastMessage.length>10){
                        session.lastMessage=session.lastMessage.substring(0,10);
                    }
                    //5、构造li标签内容
                    li.innerHTML='<h3>'+session.friendList[0].friendName+'</h3>'
                        +'<p>'+(session.lastMessage || '')+'</p>';
                    sessionList.appendChild(li);
                    //6、增加用户点击li事件的处理
                    li.onclick=function(){
                        clickSession(li);
                    }
                }
            }
        }
    });
}

getSessionList();

function clickSession(currentSessionLi){
    //1、获取所有li标签
    let sessionLis=document.querySelectorAll('#session-list>li');
    //2、把当前的会话设置为高亮状态
    activeSession(sessionLis,currentSessionLi);
    //3、从服务器拉取到该会话的历史信息
    let sessionId=currentSessionLi.getAttribute('message-session-id');
    console.log('sessionId='+sessionId);
    getHistoryMessage(sessionId);
}

function activeSession(sessionLis,activeSessionLi){
    for(let sessionLi of sessionLis){
        if(sessionLi == activeSessionLi){
            sessionLi.className='selected';
        }else{
            sessionLi.className='';
        }
    }
}

//获取历史消息
function getHistoryMessage(sessionId){
    //获取历史信息
    console.log('获取历史消息：'+sessionId);
    //1、清空右侧已有内容
    let titleDiv=document.querySelector('.right>.title');
    titleDiv.innerHTML='';
    let messageShowDiv=document.querySelector('.right>.message-show');
    messageShowDiv.innerHTML='';

    //2、设置会话标题（把左侧会话列表中被选中的li中的<h3>设置为会话窗口标题）
    let selectedH3=document.querySelector('#session-list>.selected>h3');
    if(selectedH3){     
        titleDiv.innerHTML=selectedH3.innerHTML.trim();//去除HTML元素内部内容的首尾空白字符，并返回处理后的字符串
    }
    //3、设置会话内容
    if(!sessionId){
        return;
    }
    $.ajax({
        type:'get',
        url:'/message?sessionId='+sessionId,
        success:function(reslut){
            if(reslut.code==200 && reslut.data!=null){ 
                for(let message of reslut.data){                  
                    addMessage(messageShowDiv,message);
                }
                //4、控制滚动条，滚动到最下方
                scrollBottom(messageShowDiv);
            }
        }
    });
}

function addMessage(messageShowDiv,message){
    let selfUserName=document.querySelector('.user').innerHTML.trim();
    let messageDiv=document.createElement('div');
    //1、消息来自别人放置左边，来自自己放置右边
    if(message.fromName!=selfUserName){
        messageDiv.className='message message-left';
    }else{
        messageDiv.className='message message-right';
    }

    messageDiv.innerHTML='<div class="box">'
        +'<h4>'+message.fromName+'</h4>'
        +'<p>'+message.content+'</p>'
        +'</div>';
    messageShowDiv.appendChild(messageDiv);
}

function scrollBottom(elem){
    const clientHeight=elem.offsetHeight;//容器高度
    const scrollHeoght=elem.scrollHeight;//内容总高度
    //(水平方向滚动距离,垂直方向滚动距离)
    elem.scrollTo(0,scrollHeoght-clientHeight);
}

//点击好友显示会话
//1、给#friend-list中的每个<li>加上点击事件（在getFriendList()方法中）
//2、clickFriend(friend)
/*
    ①在会话列表#session-list查找匹配的会话
    ②找到：置顶&点击(selected)；未找到：创建新会话&通知服务器
    ③标签页切换到会话列表
*/

function clickFriend(friend){
    //1、在会话列表#session-list查找匹配好友的会话
    let sessionLi=findSessionByName(friend.friendName);
    let sessionList=document.querySelector('#session-list');
    if(sessionLi){
        //2、①找到：置顶&点击(selected)
        sessionList.insertBefore(sessionLi,sessionList.children[0]);
        sessionLi.click();//模拟点击效果
    }else{
        //②未找到：创建新会话&置顶&点击(selected)&通知服务器
        sessionLi=document.createElement('li');
        sessionLi.innerHTML='<h3>'+friend.friendName+'</h3>'+'<p></p>';
        sessionList.insertBefore(sessionLi,sessionList.children[0]);
        //此操作是在实现clickSession时补充上，保证新创建的sessionLi也能响应点击事件
        sessionLi.onclick=function(){
            clickSession(sessionLi);
        }
        //点击一下新的会话，触发高亮和拉取历史信息
        sessionLi.click();

        createSession(friend.friendId,sessionLi);
    }
     //3、标签页切换到会话列表，模拟鼠标点击
     let tabSession=document.querySelector('.tab-session');
     tabSession.click();
}


function findSessionByName(name){
    //循环遍历会话列表#session-list中的<li>，根据<li>中<h3即好友名字查找此好友的<li>
    let sessions=document.querySelectorAll('#session-list>li');
    for(let li of sessions){
        let h3=li.querySelector('h3');
        if(name==h3.innerHTML){
            return li;
        }
    }
    return null;
}

//创建会话
function createSession(friendId,sessionLi){
    $.ajax({
        type:'post',
        url:'/user/session?toUserId='+friendId,
        success:function(result){
            if(result.code==200 && result.data!=null){
                console.log("创建新会话成功！"+result.data.sessionId);
                sessionLi.setAttribute('message-session-id',result.data.sessionId);
            }else{
                alert("创建新会话失败！");
            }
        }
    });
}


//客户端发送消息
function initSendButton(){
    let sendBtn=document.querySelector('.ctrl>button');
    let messageInput=document.querySelector('.message-input');

    //1、给sendBtn注册点击回调
    sendBtn.onclick=function(){
        //(1)获取输入内容
        let content=messageInput.value;
        if(!content){
            return;
        }
        //(2)获取会话sessionId
        let selectedSessionLi=document.querySelector('#session-list>.selected');
        let sessionId=selectedSessionLi.getAttribute('message-session-id');
        //(3)构造请求
        let req={
            type:'message',
            sessionId:parseInt(sessionId),
            content:content
        };
        req=JSON.stringify(req);
        //(4)发送请求
        console.log('发送请求：'+req);
        websocket.send(req);
        //(5)清空输入框
        messageInput.value='';
    }
}

initSendButton();


